import React, { Component, Fragment } from "react";
// antd
import { Dropdown, Menu, Table, Button, Col, Pagination, Form, Input, Typography, Space, Tag, notification, Modal, message, Tooltip, Select} from "antd";
import Action from "@c/buttonAction/Index";
import { DownOutlined, CopyOutlined, CheckOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
// http
import http from '../../../utils/request';

// ansi
import {CopyToClipboard} from 'react-copy-to-clipboard';

// import XLSX from "xlsx"
import ExportJsonExcel from "js-export-excel";
import { cmdb_sheet_name } from "../../../utils/common"


const { Text } = Typography;
const { Option } = Select;
const { TextArea } = Input;

  
class Node extends Component {
    constructor(props){
        super(props)

        this.state = {
            loading: false,
            loading_label_add: false,
            loading_label_del: false,
            // 分页
            total: '',
            page: 1,
            page_number: 1000,

            // 搜索
            search_charge_type: null,
            search_common: null,

            selectedRowKeys: [],
            label_list: [''],
            offline_label_list: [],

            visable_label_add: false,
            visable_label_del: false,
            visable_export: false,
            visable_offline: false,

            namespace_list: [],
            notifygroup_list_option: [],
            
            // 表格
            dataSource: [],
            columns: [
                {title: "实例IP/名称", dataIndex: "node_ip", key: "node_ip",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <CopyToClipboard text={rowData.instance_id} 
                                    onCopy={() => 
                                        this.setState({copied: true},
                                        notification.open({
                                            message: '已复制到剪贴板',
                                            icon: <CheckOutlined style={{ color: 'green' }} />,
                                            duration: 2,
                                            placement: 'top',
                                        })
                                    )}
                                >
                                    <span><span style={{marginRight: "5px"}}><CopyOutlined /></span><span style={{color: "#6587FF"}}>{rowData.instance_id}</span></span>
                                </CopyToClipboard>
                                 
                                <Text >{rowData.name}</Text>
                            </Space>
                        )
                    }
                },
                {title: "就绪", dataIndex: "status", key: "status",
                    render: (text, rowData) => {
                        var conditions_list = []
                        var conditions_text = null

                        rowData.conditions.map((item, index)=>(
                            conditions_list.push(
                                <div>{item.key}: {item.value}</div>
                            )
                        ))

                        if (rowData.status === "True") {
                            conditions_text = <span style={{color: "green"}}>就绪</span>
                        } else if (rowData.status === "False") {
                            conditions_text = <span style={{color: "red"}}>异常</span>
                        }

                        return(
                            <div>
                                <Tooltip title={conditions_list}>
                                    {conditions_text} <ExclamationCircleOutlined />
                                </Tooltip>
                            </div>
                        )
                    }
                },
                {title: "调度", dataIndex: "scheduler", key: "scheduler",
                    render: (text, rowData) => {
                        var scheduler_text = rowData.un_scheduler ? <span style={{color: "red"}}>不可调度</span> : <span style={{color: "green"}}>可调度</span>  
                        return(<div>{scheduler_text}</div>)
                    }
                },
                {title: "污点", dataIndex: "taints", key: "taints",
                    render: (text, rowData) => {
                        var taints_list = []
                        var taints_text = null

                        rowData.taints.map((item, index)=>(taints_list.push(<div key={index}>{item}</div>)))
                        taints_text = rowData.taints.length > 0 ? <span style={{color: "red"}}>存在  <ExclamationCircleOutlined /></span> : ''

                        return(<div><Tooltip title={taints_list}>{taints_text}</Tooltip></div>)
                    }
                },
                {title: "标签", dataIndex: "labels", key: "label", width: "200px",
                    render: (text, rowData) => {
                        var label_list = []
                        rowData.labels.map((item, index)=>(
                            label_list.push(
                                <div key={index}>
                                    <Action>
                                        <Action.Button>                                              
                                            <Tag closable onClose={() => this.onClostTag({"node_name": rowData.node_name, "label": item.key})}>
                                                {item.key}: {item.value}
                                            </Tag>
                                        </Action.Button>
                                    </Action>  
                                </div>
                            )
                        ))
                        return(
                            <div>{label_list}</div>
                        )
                    }
                },
                {title: "信息", dataIndex: "node_name", key: "node_name", width: "200px",
                    render: (text, rowData) => {
                        return (
                            <div>
                                <div>{rowData.node_ip}</div>
                                <div>{rowData.node_name}</div>
                            </div>
                        )
                    }
                },
                {title: "POD CIDR", dataIndex: "pod_cidr", key: "pod_cidr"},
                {title: "节点配置", dataIndex: "instance_type", key: "instance_type",
                    render: (text, rowData) => {
                        return (
                            <div>
                                <div>{rowData.instance_cpu} {rowData.instance_memory}</div>
                                <div>{rowData.instance_type}</div>
                            </div>
                        )
                    }
                },
                {title: "创建时间", dataIndex: "create_time", key: "create_time", defaultSortOrder: 'descend', sorter: (a, b) => a.timestamp - b.timestamp},
                {title: "Kubelet", dataIndex: "kubelet_version", key: "kubelet_version"},
                {title: "挂载卷", dataIndex: "挂载卷", key: "挂载卷",
                    render: (text, rowData) => {
                        var volumes = []
                        if (rowData.volumes.length > 0) {
                        rowData.volumes.map((item, index)=>(
                            volumes.push(
                                <div>{item}</div>
                            )
                        ))}
                        return(
                            <div>{volumes}</div>
                        )
                    }
                },
                {title: "镜像", dataIndex: "node_image", key: "node_image",
                    render: (text, rowData) => {
                        return(
                            <div>                 
                                <Tag color="gold">{rowData.node_image}</Tag>
                            </div>
                        )
                    }
                },
                {title: "操作", dataIndex: "operation", key: "operation", fixed: 'right',
                    render: (text, rowData) => {
                        var scheduler_btn = rowData.un_scheduler ? <Action.Button onClick={() => this.onUnCordonNodeBtn(rowData.node_name)}>恢复调度</Action.Button> : <Action.Button onClick={() => this.onCordonNodeBtn(rowData.node_name)}>不可调度</Action.Button>
                        return (
                            <div>
                                <Action.Button onClick={() => this.onDescribeNodeBtn(rowData.node_name)}>查看节点</Action.Button>
                                <span>{scheduler_btn}</span>
                            </div>
                        )
                    }
                }
            ],
        }
        this.formRefAddLabel = React.createRef();
        this.formRefDelLabel = React.createRef();
        this.formRefExport = React.createRef();
        this.formRefOffline = React.createRef();
    }

    componentDidMount() {
        this.loadData(this.props.kubernetes_id)
        this.loadDataNamespace(this.props.kubernetes_id)
    }

    // 父组件中改变了props传值时触发的函数
    componentWillReceiveProps(nextProps) {
        if (this.props.kubernetes_id !== nextProps.kubernetes_id ) {
            this.loadData(nextProps.kubernetes_id)
            this.loadDataNamespace(nextProps.kubernetes_id)
        }
    }
    
    loadData = (kubernetes_id) => {
        this.setState({
            loading: true,
        })
        const requestData = {'operation_type': 'get_node_list', 'common': this.state.search_common}
        // 获取database列表
        http.patch('/cloud/kubernetes/node/' + kubernetes_id, requestData).then(response=>{

            // 获取标签选中列表
            var offline_label_list_s = []
            var offline_label_list = []
    
            response.data.data.items.forEach((item, index) => {
                item.labels.forEach((label) => {
                    if (!offline_label_list_s.includes(label.key)) {
                        offline_label_list.push(<Option key={label.key} value={label.key}>{label.key}</Option>);
                        offline_label_list_s.push(label.key);
                    }
                });
            });

            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false,
                offline_label_list: offline_label_list
            })
        }).catch()
    }

    loadDataNamespace = (kubernetes_id) => {
        const requestData = {'operation_type': 'get_namespace'}
        http.patch('/cloud/kubernetes/obj/' + kubernetes_id, {params: requestData}).then(response=>{
            const namespace_list = []
            const resp_data = response.data.data
            for (let i = 0; i < resp_data.length; i++) {
                namespace_list.push(<Option key={resp_data[i]}>{resp_data[i]}</Option>)
            }
            this.setState({
                namespace_list: namespace_list
            })
        })
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            // this.loadData()
        })
    }    

    /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_common: data.search_common,
            page: 1
        })
        this.loadData(this.props.kubernetes_id)
    }

    // 一键导出
    onExportExcelBtn = () => {
        // 不同云产品添加自定义字段
        const _cmdb_sheet_filter = ["node_name", "node_ip", "status", "kubelet_version", "node_image"]
        const _cmdb_sheet_header = ["名称", "IP", "状态", "Kubelet版本", "镜像"]
        let option = {}
        option.fileName = cmdb_sheet_name
        option.datas = [
            {
                sheetData: this.state.dataSource,
                sheetName: cmdb_sheet_name,
                sheetFilter: _cmdb_sheet_filter,
                sheetHeader: _cmdb_sheet_header
            }
        ]
        var toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel()
    }

    // 删除节点标签
    onClostTag = (data) => {
        this.setState({loading: true})
        const requestData = {
            'operation_type': 'del_node_label_single', 
            'node_name': data.node_name, 
            'label': data.label
        }
        // 获取database列表
        http.patch('/cloud/kubernetes/node/' + this.props.kubernetes_id, requestData).then(response=>{
            this.loadData(this.props.kubernetes_id)
        }).catch()
    }

    // 批量选中标签
    onSelectChange = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }

    // 批量添加节点标签按钮
    onAddNodeLabelBtn = () => {
        if (this.state.selectedRowKeys.length>0) {
            this.setState({
                visable_label_add: true
            })
        } else {
            message.info('请先选中需要打标签的资源实例')
        }
    }

    // 批量删除节点标签按钮
    onDelNodeLabelBtn = () => {
        if (this.state.selectedRowKeys.length>0) {
            this.setState({
                visable_label_del: true
            })
        } else {
            message.info('请先选中需要打标签的资源实例')
        }
    }

    // 批量添加标签任务取消
    onFinishLabelAddCancel = () => {
        this.formRefAddLabel.current.resetFields()
        this.setState({
            visable_label_add: false,
            loading_label_add: false,
            selectedRowKeys: [],
            label_list: ['']
        })
    }

    // 批量删除标签任务取消
    onFinishLabelDelCancel = () => {
        this.formRefDelLabel.current.resetFields()
        this.setState({
            visable_label_del: false,
            loading_label_del: false,
            selectedRowKeys: [],
            label_list: ['']
        })
    }

    // 批量添加标签任务提交
    onFinishAddLabel = (data) => {
        // data -> {key-0: 'aaa', value-0: '11', key-1: 'bbb', value-1: '22', key-2: 'cc', …}

        this.setState({
            loading_label_add: true
        })

        const requestData = {
            'operation_type': 'add_node_label', 
            'node_name_list': this.state.selectedRowKeys, 
            'label_data': data
        }

        // 批量打节点标签
        http.patch('/cloud/kubernetes/node/' + this.props.kubernetes_id, requestData).then(response=>{
            this.formRefAddLabel.current.resetFields()
            this.setState({
                loading_label_add: false,
                visable_label_add: false,
                label_list: [''],
                selectedRowKeys: []
            })
            this.loadData(this.props.kubernetes_id)
        }).catch()
    }

    // 批量删除标签任务提交
    onFinishDelLabel = (data) => {
        // data -> {key-0: 'label-0', key-1: 'label-1'}

        this.setState({
            loading_label_del: true
        })

        const requestData = {
            'operation_type': 'del_node_label', 
            'node_name_list': this.state.selectedRowKeys, 
            'label_data': data
        }

        // 批量打节点标签
        http.patch('/cloud/kubernetes/node/' + this.props.kubernetes_id, requestData).then(response=>{
            this.formRefDelLabel.current.resetFields()
            this.setState({
                loading_label_del: false,
                visable_label_del: false,
                label_list: [''],
                selectedRowKeys: []
            })
            this.loadData(this.props.kubernetes_id)
        }).catch()
    }

    // 扩展标签
    onExtendLabelBtn = () => {
        this.state.label_list.push('')
        this.setState({
            label_list: this.state.label_list
        })
    }

    // 减少标签
    onRemoveLabelBtn = () => {
        this.state.label_list.pop()
        this.setState({
            label_list: this.state.label_list
        })
    }

    // 查看节点信息
    onDescribeNodeBtn = (node_name) => {
        message.info("相关功能正在开发中，敬请期待！")
    }

    // 设置节点不可调度
    onCordonNodeBtn = (node_name) => {
        this.setState({loading: true})

        const requestData = {
            'operation_type': 'node_cordon', 
            'node_name': node_name
        }

        http.patch('/cloud/kubernetes/node/' + this.props.kubernetes_id, requestData).then(response=>{
            this.loadData(this.props.kubernetes_id)
        }).catch()
    }

    // 设置节点可调度
    onUnCordonNodeBtn = (node_name) => {
        this.setState({loading: true})

        const requestData = {
            'operation_type': 'node_uncordon', 
            'node_name': node_name
        }

        http.patch('/cloud/kubernetes/node/' + this.props.kubernetes_id, requestData).then(response=>{
            this.loadData(this.props.kubernetes_id)
        }).catch()
    }

    // 节点下线按钮
    onOfflineNodeBtn = () => {
        if (this.state.selectedRowKeys.length>0) {
            var node_list = ''
            var node_count = 0            
            this.state.dataSource.forEach((item, index) => {
                if (this.state.selectedRowKeys.includes(item.node_name)) {
                    // 获取节点信息
                    node_count += 1
                    node_list += item.node_name
                    if (node_count < this.state.selectedRowKeys.length) {node_list += '\n'}
                }
            });

            // 获取select运维钉钉群列表
            http.get('/notify/admin/group', {params: {'page': 1, 'limit': 1000}}).then(response=> {
                const data = response.data.data.items
                const notifygroup_list_option = []
                for (let i = 0; i < data.length; i++) {
                    notifygroup_list_option.push(<Option key={data[i].id}>{data[i].group_title}</Option>)
                }
                this.setState({notifygroup_list_option: notifygroup_list_option})
                this.formRefOffline.current.setFieldsValue({node_list: node_list})
            })


            this.setState({visable_offline: true})

        } else {
            message.info('请先选中需要下线的节点')
        }
    }

    // 下线节点提交
    onFinishOfflineNode = (data) => {
        const node_list = data.node_list.split('\n')
        const requestData = {
            'operation_type': 'node_offline', 'node_list': node_list, 'namespace': data.namespace, 'mode': data.mode,
            'label': data.label, 'security': data.security, 'notify': data.notify, 'worker': data.worker, 
            'notify_admin_group_id': data.notify_admin_group_id
        }

        http.patch('/cloud/kubernetes/node/' + this.props.kubernetes_id, requestData).then(response=>{
            this.setState({
                visable_offline: false,
                selectedRowKeys: [],
                // offline_label_list: [],
            })
            this.formRefOffline.current.resetFields()
            message.info(response.data.msg)
        }).catch()
    }
    
    // 下线节点取消
    onFinishOfflineNodeCancel = (data) => {
        this.formRefOffline.current.resetFields()
        this.setState({
            visable_offline: false,
            selectedRowKeys: [],
            // offline_label_list: []
        })
    }

    // 导出项目列表
    onExportProjectBtn = () => {
        this.setState({
            visable_export: true,
        })
    }

    // 导出项目取消
    onFinishExportProjectCancel = (data) => {
        this.formRefExport.current.resetFields()
        this.setState({
            visable_export: false
        })
    }

    // 导出项目提交
    onFinishExportProject = (data) => {
        const requestData = {
            'operation_type': 'node_export',
            'resource_type': data.resource_type,
            'label': data.label,
            'namespace': data.namespace
        }

        http.patch('/cloud/kubernetes/node/' + this.props.kubernetes_id, requestData).then(response=>{
            this.setState({
                visable_export: false,
                selectedRowKeys: []
            })
            this.formRefExport.current.resetFields()
            message.info(response.data.msg)
        }).catch()
    }

    render(){
        const { loading, columns, dataSource, total, selectedRowKeys, label_list, namespace_list, offline_label_list,
            loading_label_add, loading_label_del, notifygroup_list_option,
            visable_label_add, visable_label_del, visable_export, visable_offline
        } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        }

        const operations = (
            <Menu
                items={[
                    {
                        label: (
                            <Action.Button onClick={() => this.onAddNodeLabelBtn()}>添加标签</Action.Button>
                        ),
                        key: '0',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onDelNodeLabelBtn()}>删除标签</Action.Button>
                        ),
                        key: '1',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onOfflineNodeBtn()}>项目下线</Action.Button>
                        ),
                        key: '2',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onExportExcelBtn()} >导出节点数据</Action.Button>
                        ),
                        key: '3',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onExportProjectBtn()} >导出项目数据</Action.Button>
                        ),
                        key: '4',
                    },
                ]}
            />
        );
 
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        var myStyle3 = {margin: '15px'}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>
                <Form layout="inline" size="small" onFinish={this.onFinishSearch}>
                    <Form.Item label="搜索内容" name="search_common" style={myStyleForm}>
                        <Input placeholder="节点名称/IP/标签"  />
                    </Form.Item>

                    <Form.Item shouldUpdate={true} style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}></div>
                            
                <div style={myStyle1}>
                    <Dropdown overlay={operations}>
                        <Action.Button>
                            <Space>
                                更多操作
                                <DownOutlined />
                            </Space>
                        </Action.Button>
                    </Dropdown>
                </div>

                <Table
                    size="small"
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="node_name"
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 2000 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            // onChange={this.onChangeSizePage}
                            // current={page}
                            total={total}
                            // pageSizeOptions={[1000]}
                            // showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="批量添加节点标签"
                    visible={visable_label_add}
                    onCancel={this.onFinishLabelAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={1000}
                >
                    <div style={myStyle3}>
                        <Button onClick={this.onExtendLabelBtn}>新增</Button>
                        <Button onClick={this.onRemoveLabelBtn}>删除</Button>
                        （如果填入了多个相同的指标名称，则最下面的指标生效）
                    </div>

                    <div style={myStyle3}>
                        <Form
                            onFinish={this.onFinishAddLabel}
                            ref={this.formRefAddLabel}
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                        >
                            {
                                label_list.map((item, index)=>(
                                    <div key={index}>
                                        <Space size={[8, 16]} wrap>
                                            <Form.Item 
                                                name={'key-' + index}
                                                rules={[{required: true}]}
                                            >
                                                <Input placeholder="标签名称" style={{ width: '400px' }}/>
                                            </Form.Item>

                                            <Form.Item 
                                                name={'value-' + index}
                                                rules={[{required: true}]}
                                            >
                                                <Input placeholder="标签值" style={{ width: '400px' }}/>
                                            </Form.Item>
                                        </Space>
                                    </div>
                                ))
                            }
                            <Form.Item>
                                <Button loading={loading_label_add} htmlType="submit" type="primary">确定</Button>
                            </Form.Item>  
                        </Form>
                    </div>
                </Modal>

                <Modal
                    title="批量删除节点标签"
                    visible={visable_label_del}
                    onCancel={this.onFinishLabelDelCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={1000}
                >
                    <div style={myStyle3}>
                        <Button onClick={this.onExtendLabelBtn}>新增</Button>
                        <Button onClick={this.onRemoveLabelBtn}>删除</Button>
                        （如果填入了多个相同的指标名称，则最下面的指标生效）
                    </div>

                    <div style={myStyle3}>
                        <Form
                            onFinish={this.onFinishDelLabel}
                            ref={this.formRefDelLabel}
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                        >
                            {
                                label_list.map((item, index)=>(
                                    <div key={index}>
                                        <Space size={[8, 16]} wrap>
                                            <Form.Item 
                                                name={'key-' + index}
                                                rules={[{required: true}]}
                                            >
                                                <Input placeholder="标签名称" style={{ width: '400px' }}/>
                                            </Form.Item>
                                        </Space>
                                    </div>
                                ))
                            }
                            <Form.Item>
                                <Button loading={loading_label_del} htmlType="submit" type="primary">确定</Button>
                            </Form.Item>  
                        </Form>
                    </div>
                </Modal>

                <Modal
                    title="项目下线"
                    visible={visable_offline}
                    onCancel={this.onFinishOfflineNodeCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={600}
                >
                    <Form
                        onFinish={this.onFinishOfflineNode}
                        ref={this.formRefOffline}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="下线节点" name="node_list" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <TextArea style={{ width: 300 }} disabled autoSize={{ minRows: 1 }}></TextArea>    
                        </Form.Item>

                        <Form.Item label="命名空间" name="namespace" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择命名空间"
                            >
                                {namespace_list}
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="下线模式" name="mode" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择下线模式"
                            >
                                <Option key="节点">节点 (节点标签)</Option>
                                <Option key="项目">项目 (项目标签)</Option>
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="下线标签" name="label" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择节点标签"
                            >
                                {offline_label_list}
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="安全模式" name="security" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择安全模式"
                            >
                                <Option key="默认下线">默认下线</Option>
                                <Option key="跳过单节点">跳过单节点</Option>
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="通知类型" name="notify" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择通知类型"
                            >
                                <Option key="异常消息">异常消息</Option>
                                <Option key="所有消息">所有消息</Option>
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="通知群组" name="notify_admin_group_id" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择通知类型"
                            >
                                {notifygroup_list_option}
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="线程个数" name="worker" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择线程个数"
                            >
                                <Option key={1}>1</Option>
                                <Option key={2}>2</Option>
                                <Option key={3}>3</Option>
                                <Option key={4}>4</Option>
                                <Option key={5}>5</Option>
                                <Option key={10}>10</Option>
                                <Option key={20}>20</Option>
                            </Select>                      
                        </Form.Item>

                        <Form.Item>
                            <Button loading={loading} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>       
                    </Form>
                </Modal>

                <Modal
                    title="导出项目明细"
                    visible={visable_export}
                    onCancel={this.onFinishExportProjectCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={600}
                >
                    <Form
                        onFinish={this.onFinishExportProject}
                        ref={this.formRefExport}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 5 }}
                    >
                        <Form.Item label="命名空间" name="namespace" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择命名空间"
                            >
                                {namespace_list}
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="节点标签" name="label" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择节点标签"
                            >
                                {offline_label_list}
                            </Select>                      
                        </Form.Item>

                        <Form.Item label="导出类型" name="resource_type" size="small" style={myStyleForm} rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 300 }}
                                placeholder="选择导出类型"
                            >
                                <Option key="pod">项目标签（选中标签的所有项目）</Option>
                                <Option key="node">节点标签（选中标签节点的所有项目）</Option>
                            </Select>                      
                        </Form.Item>

                        <Form.Item>
                            <Button loading={loading} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>       
                    </Form>
                </Modal>
            </Fragment>
        )
    }
}

export default Node;